<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>项目列表</span>
        </div>
      </template>
      <el-input
        style="width: 300px"
        @clear="searchOrder"
        clearable
        v-model="searchForm.name"
        placeholder="请输入项目名称"
        class="input-with-select"
      >
        <template #append>
          <el-button icon="Search" @click="searchOrder" />
        </template>
      </el-input>

      <span style="font-size: 15px; margin-left: 20px"> 选择年份：</span>
      <el-select
        v-model="searchForm.year"
        placeholder="Select"
        style="width: 140px"
        @change="searchOrder"
      >
        <el-option v-for="item in years" :key="item.year" :value="item.year" />
      </el-select>

      <!-- <span style="font-size: 15px; margin-left: 20px"> 选择部门：</span>
      <el-select
        v-model="searchForm.department"
        placeholder="全部"
        style="width: 200px"
      >
        <el-option v-for="item in departments" :key="item.id" :value="item.name" />
      </el-select> -->

      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="product_name" label="项目名称" width="250" fixed="left">
          <template #default="scope">
            <div v-if="scope.row.notes">
              <el-popover placement="right" :width="100" trigger="hover">
                <template #reference>
                  <span style="text-decoration: underline; cursor: pointer;">{{ scope.row.product_name }}</span>
                </template>
                <template #default>
                  {{ scope.row.notes }}
                </template>
              </el-popover>
            </div>
            <div v-else>
              {{ scope.row.product_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="department_name" label="部门" width="180" />
        <el-table-column prop="haibao" label="海报设计" />
        <el-table-column prop="changtu" label="长图" />
        <el-table-column prop="h5" label="H5设计" />
        <el-table-column prop="shipin" label="视频制作" />
        <el-table-column prop="ziyuan" label="资源图" />
        <el-table-column prop="chahua" label="插画" />
        <el-table-column prop="donghua" label="动画" />
        <el-table-column prop="ppt" label="PPT、杂志" />
        <el-table-column prop="wuliao" label="物料" />
        <el-table-column prop="money" label="经营" />
        <el-table-column prop="work_date" label="时间" />
        <el-table-column label="操作" v-if="tool.isAdmin()" >
          <template #default="scope">
            <el-button
              size="small"
              @click="editOrder(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px"
        :current-page="searchForm.current"
        :page-size="searchForm.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import workApi from '../../api/work'
import tool from '../../tools/tool'

import { useRouter } from 'vue-router'
const router = useRouter()

const tableData = ref([])
let total = ref(0)
const years = ref()
const departments = ref([])

// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 10,
  name: '',
  year: '',
})

onMounted(async () => {
  const yearRes = await workApi.getDistinctYears()
  years.value = yearRes.data
  console.log(years.value)
  //默认今年
  const currentYear = new Date().getFullYear()
  searchForm.year = currentYear

  //请求部门列表
  const departmentRes = await workApi.getDepartments()
  departments.value = departmentRes.data

  //请求数据
  getAllOrders()
})

// 获取数据列表
const getAllOrders = async () => {
  const res = await workApi.getAllOrders(searchForm)
  console.log(res)
  // 处理work_date，只取年月日
  const processedData = res.data.rows[0].map((order) => {
    const { work_date, ...rest } = order
    return {
      ...rest,
      work_date: new Date(new Date(work_date).getTime() + 8 * 60 * 60 * 1000)
        .toISOString()
        .split('T')[0], //转换成北京时间
    }
  })
  tableData.value = Object.assign([], processedData)
  total.value = res.data.totalCount
}

const handleSizeChange = (size) => {
  searchForm.size = size
  getAllOrders()
}
const handleCurrentChange = (current) => {
  searchForm.current = current
  getAllOrders()
}
const searchOrder = () => {
  searchForm.current = 1
  getAllOrders()
}

const editOrder = async (id) => {
  router.push({
    path: '/week_report/add',
    query: { id: id },
  })
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table .cell {
  text-align: center;
  line-height: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-row {
  padding-bottom: 60px;
}

.el-col {
  width: 200px;
  height: 300px;
  margin: 5px;
}
.el-col-24 {
  flex: none;
}
.el-col .image {
  padding: 20px;
  width: 80%;
}

.el-col video {
  width: 100%;
}
</style>
